Vertically center default appender controls. #15868
Conversation
There was a problem hiding this comment.
Nice. Looks good in vanilla and twenty nineteen:
Code looks good. You'll want the tests to pass though.
The text is a LEEEDL up high in Twenty Nineteen, but I suspect that's the font.
On a separate note that I'm pretty sure is completely unrelated, Twenty Nineteen seems to have an issue with the default appender — the one that sits on a blank fresh page:
It's indented from the left.
|
Thanks for the fix @kjellr |
Ugh yes, I see that too. It only happens on initial load — if you click in and out again, the text is positioned as it should be. 😩 I'll dig into that after merging this. I'm also seeing a little position change in Safari when you hover over the appender icon. This doesn't appear in Chrome.
This also existed before this PR, so I'll look into that separately too. |
Currently, the controls to the left and right of the default appender rely on the text being ~16px tall. This works well in themes where that's the case, but not so well in themes with larger text, like Twenty Nineteen. This PR vertically vertically aligns the appender controls so they more regularly fall in alignment with the text.
Screens under 600px are unaffected by this PR. The inserter control doesn't quite line up there either, but it's less obvious because it only appears on hover, and mobile devices usually don't have that capability.
I've tested in:
... and it seems to behave as expected.
Here's Twenty Nineteen, which uses a 22px font size:
Before
After
Note that if a theme uses a super-large text size, and the text has to wrap on screens above 600px wide, the controls will now be centered vertically. I think this seems fine given the larger win here:
Before
After